<template>
  <div class="text-con">
    <p>test</p>
    <!-- 插槽有name属性,default默认 -->
    <slot name="default">
      <h3>默认</h3>
    </slot>
    <slot name="default1" msg="Hello vue.js">
      <p>我是第二个具名·插槽的默认值</p>
    </slot>
    <slot name="default2" msg="Hello vue.js" :user="uname">
      <p>我是第二个具名·插槽的默认值</p>
    </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: "张三",
    };
  },
};
</script>

<style scoped>
.text-con {
  background-color: cornflowerblue;
  height: 100px;
  width: 50%;
}
</style>